<template>
  <view class="points-card">
    <view class="points-header">
      <view class="points-icon">
        <u-icon name="heart-fill" color="#ff6b81" size="32" />
      </view>
      <view class="points-info">
        <text class="points-title">我的积分</text>
        <text class="points-value">{{ points }}</text>
      </view>
    </view>
    <view class="points-progress" v-if="nextLevelPoints">
      <view class="progress-bar">
        <view class="progress" :style="{ width: progressPercent + '%' }"></view>
      </view>
      <text class="progress-text">再获得 {{ nextLevelPoints - points }} 积分升级为 "{{ nextLevelName }}"</text>
    </view>
    <view class="points-actions">
      <button class="action-btn" @tap="handleTasks">做任务</button>
      <button class="action-btn" @tap="handleHistory">积分记录</button>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  points: {
    type: Number,
    default: 0
  },
  nextLevelPoints: {
    type: Number,
    default: 1500
  },
  nextLevelName: {
    type: String,
    default: '甜蜜恋人'
  }
})

const emit = defineEmits(['tasks', 'history'])

const progressPercent = computed(() => {
  return Math.min((props.points / props.nextLevelPoints) * 100, 100)
})

const handleTasks = () => {
  emit('tasks')
}

const handleHistory = () => {
  emit('history')
}
</script>

<style lang="scss" scoped>
.points-card {
  background: linear-gradient(135deg, #ff6b81, #ff8a95);
  border-radius: 20rpx;
  padding: 40rpx;
  margin: 20rpx;
  color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(255, 107, 129, 0.3);
  
  .points-header {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    
    .points-icon {
      margin-right: 20rpx;
}
    
    .points-info {
      .points-title {
        font-size: 28rpx;
        opacity: 0.9;
        display: block;
        margin-bottom: 8rpx;
}
      
      .points-value {
        font-size: 48rpx;
        font-weight: bold;
        display: block;
}
    }
  }
  
  .points-progress {
    margin-bottom: 30rpx;
    
    .progress-bar {
      height: 8rpx;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 4rpx;
      margin-bottom: 16rpx;
      
      .progress {
        height: 100%;
        background: #fff;
        border-radius: 4rpx;
        transition: width 0.3s ease;
}
    }
    
    .progress-text {
      font-size: 24rpx;
      opacity: 0.9;
}
  }
  
  .points-actions {
    display: flex;
     margin-right: 20rpx; &:last-child { margin-right: 0; }
    
    .action-btn {
      flex: 1;
      background: rgba(255, 255, 255, 0.2);
      border: 1rpx solid rgba(255, 255, 255, 0.3);
      color: #fff;
      font-size: 26rpx;
      padding: 16rpx 0;
      border-radius: 8rpx;
      
      &:active {
        background: rgba(255, 255, 255, 0.3);
}
    }
  }
}
</style>